<template>
  <div>
    <baidu-map
      style="display: flex; flex-direction: column-reverse"
      id="allmap"
      @ready="mapReady"
      @click="getLocation"
      :scroll-wheel-zoom="true"
    >
      <div style="display: flex; justify-content: center; margin: 15px">
        <bm-auto-complete
          v-model="searchJingwei"
          :sugStyle="{ zIndex: 999999 }"
        >
          <input
            v-model="searchJingwei"
            style="width: 300px; margin-right: 15px"
            placeholder="输入地址"
          />
        </bm-auto-complete>
        <button type="primary" @click="getBaiduMapPoint">搜索</button>
      </div>
      <bm-map-type
        :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
        anchor="BMAP_ANCHOR_TOP_LEFT"
      ></bm-map-type>
      <bm-marker
        v-if="infoWindowShow"
        :position="{ lng: longitude, lat: latitude }"
        animation="BMAP_ANIMATION_BOUNCE"
      >
        <bm-label
          :content="BAddress"
          :labelStyle="{ color: 'red', fontSize: '12px' }"
          :offset="{ width: -150, height: 30 }"
        />
      </bm-marker>
      <bm-info-window
        :position="{ lng: longitude, lat: latitude }"
        :show="infoWindowShow"
        @clickclose="infoWindowClose"
      >
        <p>纬度:{{ this.latitude }}</p>
        <p>经度:{{ this.longitude }}</p>
      </bm-info-window>
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation>
    </baidu-map>
  </div>
</template>

<script>
export default {
  name: 'Map',
  data() {
    return {
      searchJingwei: '',
      infoWindowShow: false,
      longitude: '',
      latitude: '',
      point: '',
      address: null, // 存储逆地理编码的结果
      BAddress: '',
    }
  },
  methods: {
    //地图初始化
    mapReady({ BMap, map }) {
      // 选择一个经纬度作为中心点

      this.point = new BMap.Point(114.308815, 30.597565) //地图初始定位
      var myGeo = new BMap.Geocoder()
      map.centerAndZoom(this.point, 12)
      this.BMap = BMap
      this.map = map
      const that = this
      myGeo.getLocation(this.point, function (result) {
        that.BAddress = result.surroundingPois[0].address //获取到当前定位的详细地址信息
      })
    },
    //点击获取经纬度
    getLocation(e) {
      this.longitude = e.point.lng
      this.latitude = e.point.lat
      this.infoWindowShow = true
      // console.log(e)
      let myGeo = new BMap.Geocoder()
      const that = this
      try {
        myGeo.getLocation(e.point, function (result) {
          console.log(result)
          if (result.surroundingPois.length) {
            that.BAddress =
              result.surroundingPois[0].address +
              result.surroundingPois[0].title
          } else {
            that.BAddress = result.address
          }
          //获取到当前定位的详细地址信息
        })
      } catch (error) {
        console.log(error)
      }
    },
    // 根据搜索条件定位
    getBaiduMapPoint() {
      let that = this
      let myGeo = new this.BMap.Geocoder()
      myGeo.getPoint(this.searchJingwei, function (point) {
        if (point) {
          that.map.centerAndZoom(point, 15)
          that.latitude = point.lat
          that.longitude = point.lng
          that.infoWindowShow = true
          try {
            myGeo.getLocation(point, function (result) {
              console.log(result)
              if (result.surroundingPois.length) {
                that.BAddress =
                  result.surroundingPois[0].address +
                  result.surroundingPois[0].title
              } else {
                that.BAddress = result.address
              }
              //获取到当前定位的详细地址信息
            })
          } catch (error) {
            console.log(error)
          }
        }
      })
    },
    //信息窗口关闭
    infoWindowClose() {
      this.latitude = ''
      this.longitude = ''
      this.infoWindowShow = false
    },
  },
}
</script>

<style scoped>
#allmap {
  height: 800px;
  width: 100%;
  margin: 10px 0;
}
</style>
